class FieldsContainer {
  constructor() {
  }
  // ==== 渲染函数 ====
  renderField(field, container) {
    const div = document.createElement('div');
    div.className = 'dropped-field';
    div.dataset.key = field.uuid;
    div.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div onclick="selectFieldByClick(event, '${field.uuid}')" style="flex: 1; cursor: pointer;">
            <div>
              <span class="label-type">${this.getFieldIcon(field.type)}</span>
              <strong>${field.label}</strong>
              <span class="label-value">${field.key}</span></div>
          </div>
          <button class="btn" onclick="removeField('${field.uuid}')" style="margin-left: 10px;">删除</button>
        </div>
      `;
    container.appendChild(div);
  }
  updateField(field, fieldsContainer) {
    /*
     // 重新渲染字段 - 使用旧的key值查找元素
      const fieldElement = document.querySelector(`[data-key="${oldKey}"]`);
      if (fieldElement) {
        fieldElement.remove();
      }*/
    const fieldDiv = document.querySelector(`[data-key="${field.uuid}"]`);
    if (fieldDiv) {
      fieldDiv.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div onclick="selectFieldByClick(event, '${field.uuid}')" style="flex: 1; cursor: pointer;">
            <div>
              <span class="label-type">${this.getFieldIcon(field.type)}</span>
              <strong>${field.label}</strong>
              <span class="label-value">${field.key}</span>
            </div>
          </div>
          <button class="btn" onclick="removeField('${field.uuid}')" style="margin-left: 10px;">删除</button>
        </div>
      `;
    }
  }

  // 获取字段图标
  getFieldIcon(type) {
    // 字段类型到图标的映射
    let fieldIcons = {
      'input': '📝',
      'select': '📋',
      'label': '🏷️',
      'geo-location': '📍',
      'textarea': '📄',
      'image-list-upload': '🖼️'
    };
    return fieldIcons[type] || '❓';
  }
}
export default new FieldsContainer();